import React, { PureComponent } from 'react'
import { Table, Button, Menu, Dropdown, Icon } from 'antd';

export default class List extends PureComponent {
    componentDidMount() {
        const { getTable } = this.props
        getTable()
    }

    handleMenuClick = (e, record) => {
        const { showModal, editDataSource } = this.props
        switch (e.key) {
            case 'edit':
                showModal(record.id)
                break;

            case 'delete':
                editDataSource(record.id)
                break;

            default:
                break;
        }
    }

    render() {
        const { dataSource, columns, current, totalPage, getTable } = this.props
        const newColumns = [
            ...columns,
            {
                title: '操作',
                key: 'action',
                align: 'center',
                render: record => (
                    <Dropdown 
                    overlay={
                    <Menu onClick={(e) => { this.handleMenuClick(e, record) }}>
                        <Menu.Item key="edit">修改</Menu.Item>
                        <Menu.Item key="delete">删除</Menu.Item>
                    </Menu>}>
                        <Button size="small" style={{ border: 0 }}>
                            <Icon type="bars" /><Icon type="down" />
                        </Button>
                    </Dropdown>
                )
            }
        ]
        const paginationProps = {
            showQuickJumper: false,
            pageSize: 10,
            defaultCurrent: current,
            total: (totalPage * 10),
            onChange: (current) => getTable(current)
        }
        return (
            <div>
                <Table
                    rowKey={record => record.id}
                    dataSource={dataSource}
                    columns={newColumns}
                    pagination={paginationProps}
                    bordered
                />
            </div>
        )
    }
}